<template>
	<view class="cart-item-container" :style="{'border':border?'4rpx solid #E1E8E8':'','border-radius':radius,}">
		<view class="shopBox" style="" v-if="showShop">
			<image style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 20rpx;"
				:src="$u.file.getMedieUrl(data.shopCarts[0].shopAvatarUrl)" mode="aspectFill"></image>
			<view class="" style="  
    font-size: 14px;
    width: 200px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;" @click="goShopInfo()">

				{{data.shopName}}
			</view>
			<image style="height: 20rpx;width: 20rpx;margin-left: 5px;" src="@/static/svg/right-arrows.svg" mode="aspectFill">
		</view>
		<!-- <view class="cart-item-main"> -->
		<uni-swipe-action>
			<uni-swipe-action-item class="swipeBox" :right-options="options" @click="deleteClick(it,inx)" :index="inx"
				v-for="(it,inx) in data.shopCarts" :key="it.skuId" >
				<template v-slot:right>
					<u-icon class="delIcon" @click="deleteClick(it,inx)" name="trash-fill"></u-icon>
				</template>
				<view class="title-wrap">
					<view class="show">
						<imageForSize radius="26" size="160" :src="$u.file.getMedieUrl(it.image||it.images)"></imageForSize>
						<view class="info">
							<p class="name"  @click="!isSeckill?goProductDetail(it):''">
								{{ it.name }}
							</p>
							<p class="name" style="background-color: #f3f3f3;">
								{{ it.skuName }}
							</p>
							<p class="describe">
								{{ it.des||it.goodsDesc }}
							</p>
							<p class="price" v-if="it.price !== undefined&&!it.seckillPrice">
								${{ publicJS.toFixed(it.price, 2) }}|{{$t('product.residualInventory')}} {{it.inventoryNum}}
							</p>
							<p class="price" v-else>
								${{ publicJS.toFixed(it.seckillPrice, 2) }}
							</p>
						</view>
					</view>
					
					<view class="number-check" v-if="checkShow&&it.inventoryNum>0">
						<u-checkbox @change="checkChange" :value="checkList.some(s=>s.skuId===it.skuId)" shape="circle"
							:name="it.skuId||it.skuName">
						</u-checkbox>
						<u-number-box class="capsule" :max="it.inventoryNum" :long-press="false" type="capsule" :min="1"
							v-model="it.num" @change="numberBoxChange" :index="inx" @plus="plus">
						</u-number-box>
					</view>
				
					<view class="" v-else>
						{{$t('system.outOf')}}
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <u-swipe-action :btnWidth="90" :show="it.show" :index="inx"  v-for="(it,inx) in data.shopCarts" :key="it.skuId"
				 @click="deleteClick(it,inx)" :options="options" @open="open" >
							
			
					<view class="title-wrap" >	
						
								<view class="show" @click="!isSeckill?goProductDetail(it):''">
									<imageForSize radius="26" size="160" :src="$u.file.getMedieUrl(it.image||it.images)"></imageForSize>
									<view class="info">
										<p class="name">
											{{ it.name }}
										</p>
										<p class="name" style="background-color: #f3f3f3;">
											{{ it.skuName }}
										</p>
										<p class="describe">
											{{ it.des||it.goodsDesc }}
										</p>
										<p class="price" v-if="it.price !== undefined&&!it.seckillPrice">
											${{ publicJS.toFixed(it.price, 2) }}
										</p>
										<p class="price" v-else>
											${{ publicJS.toFixed(it.seckillPrice, 2) }}
										</p>
									</view>
								</view>
											
								<view class="number-check" v-if="checkShow">
									<u-checkbox @change="checkChange" :value="checkList.some(s=>s.skuId===it.skuId)" shape="circle" :name="it.skuId||it.skuName">
									</u-checkbox>
									<u-number-box class="capsule" :max="it.maxNumber"  :long-press="false" type="capsule" :min="1"  v-model="it.num" 
										@change="numberBoxChange" :index="inx" @plus="plus">
									</u-number-box>
								</view>
								<slot v-else name="btn"></slot>			
				
						
					</view>
		
			</u-swipe-action> -->
		<!-- </view> -->

	</view>
</template>

<script>
	/**
	 * shopCart 购物车卡片
	 * @description 该组件主要为我的购物车使用。
	 * @property {Object} data 填充卡片所需数据
	 * @property {Boolean} border 是否展示边框
	 * @property {Boolean} check 是否选中
	 * @property {String} radius 圆角传递百分比或者长度
	 * @property {checkShow} checkShow 是否展示选择框
	 */
	export default {
		props: {
			checkList: {
				default: () => ([]),
				type: Array
			},
			data: {
				default: () => ({}),
				type: Object
			},
			border: {
				default: true,
				type: Boolean
			},
			check: {
				default: true,
				type: Boolean
			},
			radius: {
				default: '26rpx',
				type: String
			},
			checkShow: {
				default: true,
				type: Boolean
			},
			isSeckill: {
				default: false,
				type: Boolean
			},
			showShop: {
				default: false,
				type: Boolean
			},
		},
		data() {
			return {
				maxNumber: false,
				first: true,
				options: [{
					text: '',
					style: {
						backgroundColor: '#2934D0',
					}
				}]
			};
		},
		created() {
			this.data.shopCarts.forEach(i => {
				i.show = false
				this.$set(i, 'maxNumber', i.num + 1)
			})
			// console.log(11111,this.data);
		},

		methods: {
			swipeChange(e, idx) {
				console.log(e, idx)
			},
			plus(e, index) {

			},
			//删除
			deleteClick(e, index) {
				console.log(9999, e);
				let array = [e._id]
				this.$u.delete('/app/cart', array).then(res => {
					this.$u.toast(this.$t('system.haveDeleted'))

					this.$emit('deleteClick', e._id, index)
				})
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {

				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.data.shopCarts[index].show = true;
				this.data.shopCarts.map((val, idx) => {
					if (index != idx) this.data.shopCarts[idx].show = false;
				})
				this.$forceUpdate();
				// console.log(this.data)
			},

			checked(item) {
				this.checkList.forEach(it => {
					return it.shopCarts.some(s => s.skuId === item.skuId)

				})
			},
			goProductDetail(item) {

				if ((item.status !== undefined) && !item.status) {
					this.$u.toast('该商品已经下架')
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/productDetails?productId=' + item.goodsId
					})
				}

			},
			// 添加数量
			numberBoxChange(val) {
				let value = val.value
				const index = val.index
				// if(!this.first){				
				this.$emit('numChange', value, index, (status) => {
					// console.log(2323,status);
					if (status) {
						this.data.shopCarts[index].maxNumber++
						this.data.shopCarts[index].num = value
					} else {

						this.$nextTick(() => {
							setTimeout(() => {
								this.data.shopCarts[index].num = value - 1
								console.log(7878, this.data.shopCarts[index].num);
							}, 200)
						})


						// this.$nextTick(() => {
						// 	setTimeout(() => {
						// 		this.data.num = value
						// 	}, 200)
						// })
						return
					}
				})
				// }
				// this.first=false

			},
			//浏览店铺
			goShopInfo() {
				this.$u.route('/pages/shop/index', {
					shopId: this.data.shopId,
				})
				this.$u.post(`/app/shop/browseShop/${this.data.shopId}`).then((res) => {

				});
			},
			checkChange(val) {
				console.log(888, val);
				this.$emit('checkChange', {
					state: val.value,
					id: val.name || val.goodsSpecification
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart-item-container {
		padding-top: 20rpx;
		width: 100%;
		margin-bottom: 40rpx;

		.shopBox {
			display: flex;
			align-items: center;
			padding: 0 10px 20px;
		}

		// .cart-item-main {
		// 	margin:0 0 30rpx 0rpx;
		// 	width: 100%;
		// 	overflow: hidden;
		// }
	}


	.number-check {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	// }

	// .item {
	// 	display: flex;
	// 	width: 100%;
	// 	&::after {
	// 		content: none;
	// 	}
	// }
	.title-wrap {
		display: flex;
		width: 100%;

		.show {
			flex: auto;
			display: flex;
			padding: 0 20rpx;

			.info {
				padding-left: 12rpx;
				flex: 1;
				position: relative;

				.name {
					color: #1B1D29;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					margin: 10rpx 0;
				}

				.describe {
					margin-top: 10rpx;
					color: #91909A;
					font-size: 22rpx;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.price {
					position: absolute;
					bottom: 0;
					color: #000;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}

	.swipeBox {
		padding: 20rpx 0;
	}

	.delIcon {
		margin: 0 10rpx;
		font-size: 40rpx;
		color: #fff;
		width: 80rpx;
		background-color: #2934D0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// }
</style>